<template>
  <div v-if="isShow"
    class="details_container">
    <TopHeader />
    <div class="goodsMain">
      <div class="goodsFrame">
        <!-- 商品竖向轮播图 -->
        <div class="swiperFrame">
          <div class="swiper_thumb">
            <i class="el-icon-arrow-up"
              @click="sub()"></i>
            <img v-for="(item,index) in commodityDetails.slice(oldVal,newVal)"
              :src="item.img"
              @mouseenter="hoverImg(item.id)"
              :key="index"
              :class="item.id==commodityDetails[currentImgIdx-1].id ? 'swiper_active_border' : '' "
              style="height:60px;width:60px;" />
            <i class="el-icon-arrow-down"
              @click="sum()"></i>
          </div>
          <div class="swiper_current_img">
            <img style="width:300px;"
              :src="commodityDetails[currentImgIdx-1].img" />
          </div>
        </div>

        <!-- 商品竖向轮播图 End-->

        <!-- 商品信息 -->
        <div class="goodsInfo">
          <p class="infoTitle">{{ goodsInfo.msg.name }}</p>
          <p class="tipsFont">{{ goodsInfo.msg.blackname }} {{ goodsInfo.msg.spell }}</p>
          <div class="goodsPrice">
            <span class="tipsFont">价格:</span>
            <span class="newPrice">￥{{ goodsInfo.msg.price }}元</span>
            <span class="oldPrice">￥{{ goodsInfo.msg.price - 100 }}元</span>
          </div>

          <!-- 商品信息 End-->

          <!-- sku选择区域 -->
          <div v-for="(item, index) in sku"
            :key="index">
            <p class="attributeFont">{{ item.name }}</p>
            <div class="skuOptionController">
              <div @click="currentIndex(item.id[index1], index + 1)"
                class="skuOption"
                :tabindex="index"
                v-for="(item1, index1) in item.vairety"
                :key="index1">
                {{ item1 }}
              </div>
            </div>
          </div>

          <!-- <div v-for="(item, index) in sku" :key="index">
                        <p class="attributeFont">{{ item.name }}</p>
                        <el-radio-group  v-model="sku[index].id" size="mini">
                            <el-radio-button   v-for="(item1, index2) in item.vairety" :label="item1" :key="index2">{{ item1
                            }}</el-radio-button>
                        </el-radio-group>
                    </div> -->

          <!-- sku选择区域 End-->
          <div>
            <p class="attributeFont">数量</p>
            <el-input-number :min="1"
              v-model="num"></el-input-number>
            <span>库存<span style="color:rgb(255, 132, 0);">{{ }}</span>件</span>
          </div>

          <div class="buyButtonGroup">
            <button class="addIntoShopCar"
              @click="addShoppingCart()">加入购物车</button>
            <button class="buy">购买</button>
            <div class="Collec"
              @click="changeCollection()">
              <i :class="(isCollectState == true ? 'el-icon-star-on' : 'el-icon-star-off')"
                :style="{ color: isCollectState == true ? 'orange' : '' }"></i>
              <p class="collecFont"
                :style="{ color: isCollectState == true ? 'orange' : '' }">{{
                isCollectState == true ? '已收藏' :
                '收藏'
                }}</p>
            </div>
          </div>
        </div>

      </div>

    </div>
    <More :moreSatate="discussData"/>
    <Bottom />
  </div>
</template>

<script>
// 全局header
import TopHeader from '@/components/modules/header.vue';
// 商品详情长图和猜我喜欢
import More from '../../components/more.vue';
// 引入Api
import {
  listCommodityAndAdd,
  getCollectbycomid,
  listCommdityguige,
  addShoppingCart,
  listDiscuss
} from '@/utils/api/api.js';
//bottom
import Bottom from '@/components/modules/bottom.vue';
export default {
  components: {
    TopHeader,
    More,
    Bottom,
  },
  data() {
    return {
      dynamicTags: ['标签一', '标签二', '标签三'],
      //当前商品id
      currentGoodsId: null,
      //当前商品总体信息
      goodsInfo: {},
      //商品SKU
      sku: [],
      //商品全部信息
      goodsDetail: [],
      //当前用户
      user: null,
      //是否收藏
      isCollectState: false,
      // 当前选中的商品和规格
      currentGoodsSku: {},
      isShow: false,

      oldVal: 0,

      newVal: 3,

      currentImgIdx: 1,

      collection: false,
      checkboxGroup1: ['4G+64'],
      num: 1,
      commodityDetails: [
        {
          id: 1,
          img:
            'https://gw.alicdn.com/imgextra/i4/2024314280/O1CN014yPBWo1hUHuxeJRTw_!!2024314280.jpg_Q75.jpg_.webp',
        },
        {
          id: 2,
          img:
            'https://gw.alicdn.com/imgextra/i4/2024314280/O1CN01sxIXN51hUHsQz54aV_!!2024314280.jpg_Q75.jpg_.webp',
        },
        {
          id: 3,
          img:
            'https://gw.alicdn.com/imgextra/i1/2024314280/O1CN01g56kdI1hUHsOtFRoq_!!2024314280.png_.webp',
        },
        {
          id: 4,
          img:
            'https://gw.alicdn.com/imgextra/i3/2024314280/O1CN01FwiNJl1hUHv0iPQSZ_!!2024314280.jpg_Q75.jpg_.webp',
        },
        {
          id: 5,
          img:
            'https://gd4.alicdn.com/imgextra/i4/2560255227/O1CN01A7T9Sx1oU0zdDk2f1_!!2560255227.jpg_400x400.jpg',
        },
        {
          id: 6,
          img:
            'https://gd4.alicdn.com/imgextra/i4/2560255227/O1CN01U5efwP1oU0zfVjJVv_!!2560255227.jpg_400x400.jpg',
        },
        {
          id: 7,
          img:
            'https://img.pddpic.com/mms-material-img/2022-09-20/9cc0e91a-33e9-45d2-b941-4230d8e6a06d.jpeg.a.jpeg?imageMogr2/thumbnail/400x%7CimageView2/2/w/400/q/80/format/webp',
        },
      ],
      discussData:[]
    };
  },
  methods: {
    sub() {
      //swiper向上按钮操作
      if (this.oldVal != 0) {
        this.oldVal--;
        this.newVal--;
      }
    },
    sum() {
      //swiper向下按钮操作
      if (this.newVal != this.commodityDetails.length) {
        this.oldVal++;
        this.newVal++;
      }
    },
    hoverImg(id) {
      //指向缩略图更改currentImg的当前索引
      this.currentImgIdx = id;
    },

    changeCollection() {
      !this.collection;
    },
    //添加商品至购物车
    addShoppingCart() {
      // console.log(this.currentGoodsSku);
      if (this.currentGoodsSku.geid == 3) {
        addShoppingCart(
          this.user.uid,
          this.num,
          this.goodsDetail.sku[0].comid,
          this.currentGoodsSku.comid
        ).then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: '成功',
              type: 'success',
            });
            this.$store.commit('changeShoppingCartNum', 1);
          }
        });
      } else {
        this.$message({
          message: '请选择完整',
          type: 'info',
        });
      }
    },
    //是否收藏
    isCollect() {
      getCollectbycomid(
        this.user.uid,
        this.goodsDetail.msg[0].comid
          ? this.goodsDetail.msg[0].comid
          : this.goodsDetail.sku[0].comid
      ).then(resp => {
        this.isCollectState = resp.msg.collectstate;
      });
    },
    currentIndex(currentSku, index) {
      console.log('规格id' + currentSku + '第' + index + '个数据');
      this.currentGoodsSku = {
        comid: currentSku,
        geid: index,
      };
    },
    getDiscuss(idx){
      listDiscuss(idx).then(resp=>{
        console.log(resp);
        this.discussData=resp.sku
      })
    }
  },
  mounted() {},
  created() {
    this.currentGoodsId = this.$route.query.goodsId;
     this.getDiscuss(this.currentGoodsId )
    this.user = JSON.parse(localStorage.getItem('user'));
    //商品详情
    listCommodityAndAdd(this.currentGoodsId)
      .then(resp => {
        this.goodsInfo = resp;
        this.isShow = true;
        //获取规格
        listCommdityguige(this.currentGoodsId)
          .then(resp => {
            console.log('规格详情');
            console.log(resp);
            this.goodsDetail = resp;
            console.log(this.goodsDetail);
            let msg = { name: '', vairety: [], id: [] };
            let sku = { name: '', vairety: [], id: [] };
            let price = { name: '', vairety: [], id: [] };
            resp.msg.forEach(item => {
              // console.log('当前msg.gid');
              // console.log(item.cid);
              msg.name = item.n3;
              msg.vairety.push(item.n1);
              msg.id.push(item.cid);
            });
            resp.sku.forEach(item => {
              // console.log('当前sku.gid');
              // console.log(item.gid);
              sku.name = item.n2;
              sku.vairety.push(item.gname);
              sku.id.push(item.gid);
            });
            resp.expand.forEach(item => {
              // console.log('当前expand.id');
              // console.log(item.id);
              price.name = '价格';
              price.vairety.push(item.price + '元');
              price.id.push(item.id);
            });
            //

            this.sku.push(msg, sku, price);
            console.log(this.sku);
            //是否收藏
            this.isCollect();
          })
          .catch(err => {
            console.log(err);
          });
      })
      .catch(err => {
        console.log(err);
      });
  },
  updated() {},
};
</script>

<style lang="scss" scoped>
@import './details.scss';
.swiperFrame {
  display: flex;
  justify-content: space-between;
  .swiper_thumb {
  }
  .swiper_current_img {
  }
}
.swiper_active_border {
  box-sizing: border-box;
  border: 2px solid orange;
}
</style>